<script lang="ts" setup>
import type { MakeupArtist } from '#/api/wedding';
import type { Rule } from 'ant-design-vue/es/form';
import { useVbenModal } from '@vben/common-ui';
import { ImageUpload } from '#/components/upload';
import { message, Form, Input, Select, InputNumber, Row, Col } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { $t } from '#/locales';
import { getMakeupArtist, createMakeupArtist, updateMakeupArtist } from '#/api/wedding';
import { serviceLevelOptions, genderOptions, specialtyOptions } from '../data';

const emit = defineEmits(['success']);
const formRef = ref();
const formData = ref<Partial<MakeupArtist>>({
  id: undefined,
  artistCode: undefined,
  artistName: undefined,
  gender: '女',
  phone: undefined,
  serviceLevel: 'JUNIOR',
  servicePrice: 0,
  workYears: 0,
  specialties: [],
  avatar: undefined,
  introduction: undefined,
  workSamples: [],
});

const rules: Record<string, Rule[]> = {
  artistCode: [{ required: true, message: '请输入化妆师编号', trigger: 'blur' }],
  artistName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  serviceLevel: [{ required: true, message: '请选择服务等级', trigger: 'change' }],
  servicePrice: [{ required: true, message: '请输入服务价格', trigger: 'blur' }],
};

const getTitle = computed(() => formData.value?.id ? $t('ui.actionTitle.edit', ['化妆师']) : $t('ui.actionTitle.create', ['化妆师']));

const resetForm = () => {
  formData.value = {
    id: undefined,
    artistCode: undefined,
    artistName: undefined,
    gender: '女',
    phone: undefined,
    serviceLevel: 'JUNIOR',
    servicePrice: 0,
    workYears: 0,
    specialties: [],
    avatar: undefined,
    introduction: undefined,
    workSamples: [],
  };
  formRef.value?.resetFields();
};

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    await formRef.value?.validate();
    modalApi.lock();
    try {
      const data = formData.value as MakeupArtist;
      await (formData.value?.id ? updateMakeupArtist(data) : createMakeupArtist(data));
      await modalApi.close();
      emit('success');
      message.success({ content: $t('ui.actionMessage.operationSuccess'), key: 'action_process_msg' });
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      resetForm();
      return;
    }
    let data = modalApi.getData<MakeupArtist>();
    if (!data) return;
    if (data.id) {
      modalApi.lock();
      try {
        data = await getMakeupArtist(data.id);
      } finally {
        modalApi.unlock();
      }
    }
    formData.value = data;
  },
});
</script>

<template>
  <Modal :title="getTitle" width="800px">
    <Form ref="formRef" :model="formData" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
      <Row :gutter="16">
        <Col :span="12">
          <Form.Item label="化妆师编号" name="artistCode">
            <Input v-model:value="formData.artistCode" placeholder="请输入编号" :disabled="!!formData.id" />
          </Form.Item>
        </Col>
        <Col :span="12">
          <Form.Item label="姓名" name="artistName">
            <Input v-model:value="formData.artistName" placeholder="请输入姓名" />
          </Form.Item>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <Form.Item label="性别" name="gender">
            <Select v-model:value="formData.gender" :options="genderOptions" />
          </Form.Item>
        </Col>
        <Col :span="12">
          <Form.Item label="电话" name="phone">
            <Input v-model:value="formData.phone" placeholder="请输入电话" />
          </Form.Item>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <Form.Item label="服务等级" name="serviceLevel">
            <Select v-model:value="formData.serviceLevel" :options="serviceLevelOptions" />
          </Form.Item>
        </Col>
        <Col :span="12">
          <Form.Item label="服务价格" name="servicePrice">
            <InputNumber v-model:value="formData.servicePrice" :min="0" :precision="2" class="w-full" :addonAfter="'元'" />
          </Form.Item>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <Form.Item label="从业年限" name="workYears">
            <InputNumber v-model:value="formData.workYears" :min="0" class="w-full" :addonAfter="'年'" />
          </Form.Item>
        </Col>
        <Col :span="12">
          <Form.Item label="擅长领域" name="specialties">
            <Select v-model:value="formData.specialties" mode="multiple" :options="specialtyOptions" placeholder="请选择擅长领域" />
          </Form.Item>
        </Col>
      </Row>
      <Form.Item label="个人简介" name="introduction">
        <a-textarea v-model:value="formData.introduction" :rows="3" placeholder="请输入个人简介" />
      </Form.Item>
      <Form.Item label="头像" name="avatar">
        <ImageUpload v-model:value="formData.avatar" :max-count="1" />
      </Form.Item>
      <Form.Item label="作品集" name="workSamples">
        <ImageUpload v-model:value="formData.workSamples" :max-count="10" />
      </Form.Item>
    </Form>
  </Modal>
</template>
